<template>
  <div
    class="bg-white todo-item rounded-10px relative overflow-hidden"
    @click.stop="$emit('view')"
  >
    <div class="border-b border-solid border-neutral-100 px-12px py-16px">
      <div class="flex items-center">
        <span class="text-16px font-500 text-dark-300">
          {{
            [
              "",
              `${item.fromUsername}将商机转移他人`,
              `${item.fromUsername}将他人商机继承给您`,
              "本城BD录入外区商机",
              "外区BD录入本城商机",
            ][item.type]
          }}
        </span>
      </div>
      <div class="mt-12px text-13px font-400 leading-20px">
        {{ item.content }}
      </div>
    </div>
    <div class="flex p-5px items-center">
      <div class="flex-1 text-center">
        <Button
          @click.stop="$emit('view')"
          class="!border-none"
          type="primary"
          block
          plain
        >
          详情
        </Button>
      </div>
    </div>
    <div
      class="absolute top-0 right-0 text-white px-8px py-4px rounded-tr-10px rounded-bl-10px text-10px leading-14px"
      :style="{
        background: item.type == 1 || item.type == 3 ? '#F5894E' : '#1D6FE9',
      }"
    >
      {{ _filterType(item.type) }}
    </div>
  </div>
</template>

<script>
import { Button } from "vant";
import { getLocationParam } from "@/utils/tools";
import { NOTICE_TYPE } from "@/constants";
export default {
  props: {
    item: {
      type: Object,
    },
  },
  components: {
    Button,
  },
  computed: {
    isSelf() {
      return getLocationParam("userId") === this.item.fromUserId;
    },
  },
  methods: {
    _filterType(type) {
      const [statusItem] = NOTICE_TYPE.filter(({ key }) => key === type);
      return statusItem.text;
    },
  },
};
</script>

<style lang="scss" scoped>
.todo-item {
  .btn-line {
    @apply h-20px px-5px flex;
    &:after {
      content: "";
      width: 1px;
      height: 20px;
      background-color: #f5f5f5;
    }
  }
  & + .todo-item {
    @apply mt-12px;
  }
}
</style>
